<template>
  <div class="toolbar" :class="[active===''? minwrap:maxwrap]">
    <newfile-popup v-if="popup==='new'" :works="works" @apply="newfile" @close="popup=''"></newfile-popup>
    <rename-popup v-if="popup==='rename'" :target="target" :works="works" @apply="rename" @close="popup=''"></rename-popup>
    <delete-popup v-if="popup==='delete'" :target="target" :works="works" @apply="delfile" @close="popup=''"></delete-popup>
    <!-- 左侧工具栏 -->
    <div class="option" :class="active">
      <div class="option-item folder" @click="setOption('folder')">
          <icon-font v-if="active==='folder'" icon-class="folder-open"/>
          <icon-font v-else icon-class="folder"/>
      </div>
    </div>
    <!-- 扩展栏 -->
    <div class="catalog" v-if="active!==''">
        <file-list
                v-if="active==='folder'"
                :works="works"
                :target="target"
                :popup="popup"
                @setTarget="setTarget"
                @setPopup="setPopup"/>
    </div>
  </div>
</template>

<script>
import Editor from '../common/editor'
import NewfilePopup from './components/newfile-popup'
import RenamePopup from './components/rename-popup'
import FileList from './components/file-list'
import DeletePopup from './components/delete-popup'
export default {
  name: 'ToolBar',
  components: {
    DeletePopup,
    FileList,
    RenamePopup,
    NewfilePopup
  },
  props: {
    works: {
      type: Array
    },
    target: {
      type: Number
    }
  },
  data () {
    return {
      active: 'folder',
      minwrap: 'min-wrap',
      maxwrap: 'max-wrap',
      popup: ''
    }
  },
  methods: {
    setOption: function (item) {
      this.active = (this.active === item) ? '' : item
    },
    newfile: function (name) {
      this.works.push({name: name, content: ''})
      this.$emit('setTarget', this.works.length - 1)
      this.popup = ''
    },
    rename: function (name) {
      this.popup = ''
      this.works[this.target].name = name
    },
    delfile: function () {
      this.popup = ''

      if (this.target === this.works.length - 1) {
        this.works.splice(this.target, 1)
        this.target = this.target - 1
      } else {
        this.works.splice(this.target, 1)
      }
      this.editor = Editor.getEditor()
      this.editor.setValue(this.works[this.target].content)
    },
    setTarget: function (index) {
      this.$emit('setTarget', index)
    },
    setPopup: function (text) {
      this.popup = text
    }
  }
}
</script>

<style scoped>
  .option,.catalog{
    display: inline-block;
    height: 100%;
  }
  .toolbar{
    display: inline-block;
    float: left;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    flex-wrap: nowrap;
    min-width: 170px;
    user-select: none;
    position: relative;
  }
  .option{
    min-width: 50px;
    width: 50px;
    background-color: #323B4A;
  }
  .option-item{
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      cursor:pointer;
      color: white;
      font-size: 16px;
  }
  .option-item:first-child{
      margin-top: 48px;
  }
  .option.folder .folder{
      background-color: #0e1926;
  }
  .min-wrap{
      min-width: 50px;
  }
  .max-wrap{
      min-width: 175px;
  }
  .catalog{
    width: 160px;
    background-color: rgb(228,240,255);
    flex: 1;
    position: relative;
  }
</style>
